<template>
	<view>
		<!-- 加载动画 -->
		<!-- <view v-if="pageLoad" class="text-gray padding justify-center flex align-center">
			<u-loading mode="circle" color="#2979ff" size="40"></u-loading>
			<view class="margin-left-sm">加载中...</view>
		</view> -->
		<view>
			<!-- cu-btn bg-blue shadow lg  flex justify-end jiacu -->

			<!-- <button class="cu-btn bg-blue shadow lg  flex justify-end jiacu dibu" @click="showpinglun() ">评论</button> -->

			<view class="text-gray padding justify-center flex" v-if="Object.keys(list).length==0"><text>暂无评论</text>
			</view>
			<view v-else id="comment-list" class="comment-list" :class="listShow?'':'commentList'">
				<view class="cu-list menu-avatar comment">
					<view class="cu-item" v-for="(item,key) in list" :key="key">
						<view class="cu-avatar round"
							:style="'background-image:url('+ item.user.avatar +'?x-oss-process=image/resize,m_fixed,w_100' +');'">
						</view>
						<view class="content">
							<view class="text-grey">{{item.user.nickname}}</view>
							<view class="text-gray text-content text-df" :pid="item.id" :title="'回复@'+item.nickname"
								:reply_text="'回复@'+item.nickname">
								{{item.content}}
							</view>
							<view class="flex justify-between">
								<view class="text-gray text-df">{{item.createTime}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="text-gray padding justify-center flex" v-if="listShow" @click="getList"><text>查看更多评论</text>
			</view>
		</view>
		<!-- <view class="padding-tb-xl margin-top-xl">
			<view class="cu-bar foot bg-white justify-end ">
				<view class="padding-right-xl">
					<button class="cu-btn bg-blue shadow lg" @click="show = true">写评论</button>
				</view>		
			</view>	
			
		</view> -->

		<u-popup v-model="show" mode="bottom">
			<view class="wrap">
				<form @submit="cmFormSubmit" class="">
					<view style="display: none;">
						<input type="text" name="tablename" :value="tablename" />
						<input type="text" name="objectid" :value="objectid" />
					</view>
					<view class="cu-form-group align-start">
						<textarea name="content" maxlength="-1" focus placeholder="评论一下吧~"></textarea>
						<view class="flex justify-center ">
							<!-- <button @click="show = false" class="cu-btn shadow margin-right-xl bg-red">取消</button> -->

							<button formType="submit" class="cu-btn shadow bg-blue pinglun">发送</button>
						</view>
					</view>

				</form>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import mdate from "../common/date.js";
	import {
		mapGetters
	} from 'vuex';
	export default {
		props: {
			tablename: "",
			objectid: ""
		},
		computed: {
			// ...mapGetters(['userInfo'])
		},
		data: function() {
			return {
				rscount: 0,
				list: [],
				cmFormClass: "",
				cmBtnClass: "",
				show: false,
				start: 0,
				limit: 4,
				listShow: true,
				pageLoad: true,
				userInfo: {}
			}
		},
		created: function() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.getPage();
		},
		methods: {
			showpinglun() {
				this.show = true;
			},
			caozuozizujian: function() {
				console.log('操作子组件方法成功');
			},
			getPage: function() {
				var that = this;
				that.pageLoad = true
				// console.log(this.objectid)
				uniCloud.callFunction({
					name: "comment",
					data: {
						cloudAction: "list",
						params: {
							objectid: this.objectid,
							tablename: this.tablename,
							start: 0,
							limit: this.limit,
						}
					},
					success: function(e) {
						var res = e.result.data;
						that.list = []
						if (res.list.length < that.limit) {
							that.listShow = false
						} else {
							that.listShow = true
						}
						for (var i in res.list) {
							that.list.push(res.list[i])
						}
						that.start = 0 + that.limit;
						// console.log(that.start)
						// console.log(that.list)
						that.pageLoad = false
					},
					fail: function(e) {
						// console.log(e)
					}

				})
			},
			getList: function() {
				var that = this;
				// console.log(this.objectid)
				uniCloud.callFunction({
					name: "comment",
					data: {
						cloudAction: "list",
						params: {
							objectid: this.objectid,
							tablename: this.tablename,
							start: this.start,
							limit: this.limit,
						}
					},
					success: function(e) {
						var res = e.result.data;
						if (res.list.length < that.limit) {
							for (let i in res.list) {
								that.list.push(res.list[i])
							}
							that.start = that.start + that.limit;
							uni.showToast({
								title: '没有评论了！',
								icon: 'none'
							})
							that.listShow = false
							// console.log(that.start)
						} else {
							for (let i in res.list) {
								that.list.push(res.list[i])
							}
							that.start = that.start + that.limit;
						}
						// console.log(that.list)
					},
					fail: function(e) {
						// console.log(e)
					}

				})
			},
			cmFormSubmit: function(e) {
				var that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						var openid = loginRes.code
						that.savePinglun(e, openid)
					},
					fail(err) {
						uni.showToast({
							title: err
						})
					},
				});

			},
			savePinglun(e, openid) {
				var that = this;
				var params = e.detail.value;
				if (params.content == '') {
					uni.showToast({
						title: '评论内容不能为空！',
						icon: 'none'
					})
					return
				}
				if (!this.userInfo) {
					uni.showToast({
						title: '请先登录！',
						icon: 'none'
					})
					return
				}
				this.show = false
				params.userid = this.userInfo._id;
				params.status = 0;
				params.createTime = new Date().Format("yyyy-MM-dd hh:mm:ss")
				params.openid = openid
				uniCloud.callFunction({
					name: "comment",
					data: {
						cloudAction: "save",
						params: params
					},
					success: function(e) {
						if (e.result.error) {
							uni.showToast({
								title: e.result.message
							})
							return false;
						}
						that.getPage();
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dibu {
		// position: fixed;
		// bottom: 0px;
		// z-index: 1000;
		// width: 100%;
	}

	textarea {
		background-color: #e7e7e7;
		border-radius: 20px;
		padding: 10px;
		// height: 15px;
	}

	button {
		margin-top: 20px;
		border-radius: 50px;
	}

	// .wrap{
	// 	margin-bottom: -30px;
	// }
	.justify-center {
		padding-bottom: 150rpx;
	}

	.commentList {
		padding-bottom: 150rpx;
	}
</style>
